<template>
  <div class="reconstruction-item">
    <div class="reconstruction-item__category">
      <ValueText :value="data.categoryValue" :text="data.categoryText"></ValueText>
    </div>
    <div class="reconstruction-item__detail">
      <ValueText
        class="reconstruction-item__detail__1"
        :value="data.details[0].value"
        :text="data.details[0].text"
      ></ValueText>
      <img :src="icon" />
      <!-- &nbsp;》 -->
      <ValueText
        class="reconstruction-item__detail__2"
        :value="data.details[1].value"
        :text="data.details[1].text"
      ></ValueText>
    </div>
  </div>
</template>

<script>
import ValueText from '@/components/ValueText'
import icon from '@/assets/arrow-right2.png'

export default {
  name: 'ReconstructionItem',
  components: {
    ValueText
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      icon
    }
  },
}
</script>

<style lang="scss">
.reconstruction-item {
  display: flex;
  flex-direction: column;
  align-items: center;

  .reconstruction-item__detail {
    display: flex;
    align-items: flex-end;
    color: #fff;
    margin-top: $base * 15px;
    font-size: $base * 12px;

    .value-text__value {
      line-height: $base * 28px;
      font-size: $base * 20px;
      height: $base * 28px;
    }

    img {
      margin-left: $base * 6px;
      margin-right: $base * 6px;
    }
  }
}
</style>